<template>
  <div id="shop-product-purchase-detail-page">
    <div class="page-title" :style="{top:(this.getSafeArea().top)+'px'}">
      <div id="back-button" @click="$router.push('/ShopProductPurchaseList')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>采购订单详情</span>
    </div>

    <!--二维码-->
    <div class="qr-box" v-if="detail.id>0" style="position: relative" :style="{top:(this.getSafeArea().top+5)+'px'}">
<!--      <div class="title">采购二维码</div>-->
      <div class="qr">
        <canvas ref="canvasId" id="canvasId" :style="{'width':qrCodeStyle.width, 'height':qrCodeStyle.height}"></canvas>
      </div>
      <div class="price">采购金额: <span v-text="'￥'+ToMoney(detail.money)"></span></div>
    </div>

    <!--商品清单-->
    <div class="product-list" style="overflow-x: hidden; overflow-y: auto; position: relative;" :style="{
      top:(this.getSafeArea().top+5)+'px',
      height:(this.getWinSize().height-this.getSafeArea().top-410)+'px',
    }" v-if="detail.id>0">
      <div class="title">商品清单</div>
      <div class="item" v-for="(item,index) in detail.productData" :key="index">
        <div class="name" v-text="item.name"></div>
        <div class="nums" v-text="item.nums"></div>
        <div class="price" v-text="'￥'+ToMoney(item.price)"></div>
        <div class="countPrice" v-text="'￥'+ToMoney((item.price*item.nums).toFixed(2))"></div>
      </div>
    </div>

    <div class="tmp-shop-box" style="position: relative;"
         :style="{
      top:(this.getSafeArea().top+5)+'px',
         }" @click="$router.push('/ShopHome?id='+detail.shopId)">
      <div class="logo">
        <img :src="detail.shopLogo"/>
      </div>
      <div class="name" v-text="detail.shopName"></div>
      <div class="go-to-button">
        <i class="el-icon el-icon-arrow-right"></i>
      </div>
      <div class="c"></div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'ShopProductPurchaseDetail',
  data:function () {
    return {
      qrCodeStyle:{
        width:180,
        height:180,
      },
      detail:{
        productData:[]
      }
    }
  },
  mounted () {
    this.getDetail()
  },
  methods:{
    getDetail:function () {
      let $this = this
      var form={}
      if ($this.$route.query.orderNo){
        form.orderNo=$this.$route.query.orderNo
      }
      if ($this.$route.query.id){
        form.id=$this.$route.query.id
      }
      $this.MyRequest($this.ApiDoNameMember + 'Order/getProductPurchaseDetail', form, function (data) {
        data.productData=JSON.parse(data.productData)
        $this.detail=data
        $this.$forceUpdate()
        $this.handlerQr()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
    handlerQr:function () {
      let $this=this
      var qrData={
        event:"ShopProductPurchase",
        orderNo:$this.detail.orderNo
      }
      setTimeout(function () {
        QRCode.toCanvas(
          $this.$refs.canvasId,
          JSON.stringify(qrData),
          { width:$this.qrCodeStyle.width, height:$this.qrCodeStyle.height, toSJISFunc: QRCode.toSJIS },
          error => {}
        );
      },500)
    }
  }
}
</script>

<style scoped>

</style>
